<template>
  <el-card>
    <template #header>甘特表格</template>
    <configTable size="mini" v-bind="config" :data="list" />
  </el-card>
</template>
<script lang="tsx" setup>
import { ref, reactive } from 'vue';
import configTable from '@/components/jsx/table.tsx';

const list = ref([
  { name: '一楼大会议室', a: 0.5 },
  { name: '一楼小议室', b: 0.6 },
  { name: '会议室c', c: 0.7 },
  { name: '会议室d', d: 0.8 },
  { name: '会议室e', e: 0.6 },
  { name: '会议室f', f: 0.7 }
]);
const config = reactive({
  border: true,
  columns: [
    { label: '项目名称', prop: 'name', align: 'center', fixed: 'left', width: 180 },
    {
      label: '星期一',
      prop: 'a',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.a) {
          return <el-progress percentage={row.a * 100} show-text={false} />;
        }
      }
    },
    {
      label: '星期二',
      prop: 'b',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.b) {
          const change = e => (row.b = e);
          return (
            <div>
              <el-input size="mini" value={row.b} onInput={change} />
            </div>
          );
        }
      }
    },
    {
      label: '星期三',
      prop: 'c',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.c) {
          return <el-progress percentage={row.c * 100} />;
        }
      }
    },
    {
      label: '星期四',
      prop: 'd',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.d) {
          return <el-progress percentage={row.d * 100} />;
        }
      }
    },
    {
      label: '星期五',
      prop: 'e',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.e) {
          return <el-progress percentage={row.e * 100} />;
        }
      }
    },
    {
      label: '星期六',
      prop: 'f',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.f) {
          return <el-progress percentage={row.f * 100} />;
        }
      }
    },
    {
      label: '星期日',
      prop: 'g',
      align: 'center',
      width: 300,
      render(h, { row }) {
        if (row.g) {
          return <el-progress percentage={row.g * 100} />;
        }
      }
    }
  ]
});
</script>
